<template>
  <!-----------------实名认证------------------>
  <view class="all">
    <hea :title="title" :flag="flag"></hea>
    <div class="box">
      <div class="box-1">姓名</div>
      <u--input
        placeholder="请输入姓名"
        border="node"
        v-model="name"
        fontSize="20px"
        @change="changeVal()"
      ></u--input>
    </div>
    <div class="box">
      <div class="box-1">性别</div>
      <radio-group @change="chan" style="margin-top: 18px; margin-left: 10px">
        <label>
          <radio :value="'男'" checked="checked" />男
          <radio :value="'女'" style="margin-left: 20px" />女
        </label>
      </radio-group>
    </div>
    <div class="box">
      <div class="box-1">学校</div>
      <u--input
        placeholder="请输入学校"
        border="node"
        v-model="school"
        fontSize="20px"
        @change="changeVal()"
      ></u--input>
    </div>
    <div class="box">
      <div class="box-1">学号</div>
      <u--input
        placeholder="请输入学号"
        border="node"
        v-model="studentNum"
        fontSize="20px"
        @change="changeVal()"
      ></u--input>
    </div>
    <div class="box1">
      <div style="width: 50%; font-size: 20px; padding: 15px">
        <div>学生证</div>
        <view class="content">
          <!-- 上传图片 -->
          <u-upload
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            :multiple="false"
            :maxCount="1"
            width="190rpx"
            height="190rpx"
            :deletable="true"
            :previewImage="true"
          >
            <!-- 这张图片就是自定义的图片，地址填写自己本地的就行 -->
            <image
              class="upimg"
              src="../../static/img/up.png"
              mode="widthFix"
            ></image>
          </u-upload>
        </view>
      </div>
      <div
        style="
          width: 50%;
          text-align: center;
          font-size: 20px;
          margin-top: 15px;
        "
      >
        <div>示例</div>
        <img src="../../static//img/student.png" style="margin-top: 10px" />
      </div>
    </div>
  </view>
</template>
<script>
import hea from "../../components/hea.vue";
export default {
  components: {
    hea,
  },

  data() {
    return {
      title: "实名认证",
      name: "",
      activeRadio: "男",
      school: "",
      studentNum: "",
      // 上传图片
      fileList1: [],
      flag: false,
      imgurl: "",
    };
  },
  methods: {
    changeVal() {   
      if (this.imgurl && this.name && this.school && this.studentNum) {
        this.flag = true;
      }else{
        this.flag = false;
      }
    },
    chan(e) {
      this.activeRadio = e.detail.value;
      console.log(this.activeRadio);
    },
    //删除图片
    deletePic(e) {
      console.log(e);
      this[`fileList${e.name}`].splice(e.index, 1);
      this.imgurl=''
      this.changeVal()
    },
    // 新增图片
    async afterRead(event) {
      console.log(event);
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    //上传图片
    uploadFilePromise(url) {
      this.imgurl = url;
      this.changeVal();
      //   return new Promise((resolve, reject) => {
      //     let a = uni.uploadFile({
      //       //url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址
      //       url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
      //       filePath: url,
      //       name: "file",
      //       formData: {
      //         user: "test",
      //       },
      //       success: (res) => {
      //         let data = JSON.parse(res.data); //最终传给的是字符串，这里需要转换格式
      //         resolve(data.data.url);
      //       },
      //     });
      //   });
    },
  },
  onShow() {},
};
</script>

<style scoped>
.all {
  width: 100vw;
  height: 100vh;
  background: #f2f2f2;
}
.box {
  width: 100%;
  height: 50px;
  margin-top: 1px;
  background: white;
  display: flex;
  border-bottom: 1px solid #f2f2f2;
}
.box1 {
  width: 100%;
  height: 170px;
  margin-top: 1px;
  background: white;
  display: flex;
}
.box-1 {
  font-size: 20px;
  padding: 15px;
}
.upimg {
  width: 190rpx;
  height: 190rpx;
}
.content {
  width: 190rpx;
  height: 190rpx;
}
.content[data-v-41607cda] {
  width: 100px;
  height: 99px;
  margin-left: 25px;
  margin-top: 10px;
}
</style>
